<template>
	<nt-container bgColor="#fff">
		<view class="login">
			<view class="login-body">
				<view class="login-body__item">
					<view class="login-body__item--label">手机号</view>
					<view class="login-body__item--input">
						<u--input placeholder="请输入手机号" clearable v-model="account"></u--input>
					</view>
				</view>
				<view class="login-body__item">
					<view class="login-body__item--label">新密码</view>
					<view class="login-body__item--input">
						<u--input placeholder="请输入新密码" clearable v-model="password"></u--input>
					</view>
				</view>
				<view class="login-body__item code">
					<view class="login-body__item--label">验证码</view>
					<view class="login-body__item--input flex">
						<u--input placeholder="请输入验证码" clearable v-model="code"></u--input>
						<view class="login-body__item--send" @click="sendCode">{{codeText}}</view>
					</view>
				</view>
			</view>
			<view class="login-submit" :style="active">
				<u-button loadingText="密码重置中..." :loading="loading" text="重置密码" :disabled="loading" @click="rest"></u-button>
			</view>
		</view>
	</nt-container>
</template>

<script>
import { sendMobileVerificationCode, resetUserPassword } from "@/api"
import { cache } from "@/utils"
export default {
	data() {
		return {
			loading: false,
			account: "",
			password: "",
			code: "",
			step: 1,
			codeText: "获取验证码",
			timer: null,
			number: 60,
			privacy: false
		}
	},
	computed: {
		active(){
			return this.account && this.code && this.password ? "opacity: 1" : "opacity: 0.5"
		}
	},
	onUnload(){
		clearInterval(this.timer)
	},
	methods: {
		// 登录
		rest(){
			if(!this.check()) return;
			resetUserPassword({
				mobile: this.account,
				newpassword: this.password,
				captcha: this.code
			}).then(res => {
				const { code, data } = res;
				if(code === 1){
					this.toast("重置成功")
					setTimeout(() => this.$store.dispatch("user/logout"), 1000)
				}
			})
		},
		// 发送验证码
		sendCode() {
			console.log(this.step)
			if(this.step === 2) return;
			if(!this.account) return this.toast("请输入手机号");
			sendMobileVerificationCode(this.account, "resetpwd").then(res => {
				const { code, data, msg } = res
				if(code === 1){
					this.toast("验证码已发送")
					this.step = 2
					this.down()
					return;
				}
				this.toast(msg)
			}).catch(() => {
				this.toast("验证码发送失败")
			})
		},
		down(){
			this.timer = setInterval(() =>{
				if(this.number <= 0){
					this.codeText = "重新获取"
					this.step = 3
					this.number = 60
					clearInterval(this.timer)
					return;
				}
				this.number--
				this.codeText = `${this.number}s`
			}, 1000)
		},
		check(){
			if(!this.account){
				this.toast("请输入手机号")
				return false
			}else if(!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.account)){
				this.toast("手机号格式错误")
				return false
			}
			if(!this.password){
				this.toast("请输入新密码密码")
				return false;
			}
			if(!this.code){
				this.toast("请输入验证码")
				return false;
			}
			return true
		}
	}
}
</script>



<style lang="scss" scoped>
@import "../../../../pages/login/style.scss";
</style>